<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="btnClickHandler('动态流线1')">动态流线1</button>
        <button onclick="btnClickHandler('动态流线2')">动态流线2</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        function btnClickHandler(item) {
            let material = null;
            switch (item) {
                case "动态流线1":
                    material = new cpc.MaterialDynamicFlow({
                        color: Cesium.Color.YELLOW,
                        speed: 10,
                        opacity: 0,
                        percent: 0.3,
                    });
                    this.createPolyline(material, 0, 0, 2500, 3);
                    break;
                case "动态流线2":
                    material = new cpc.MaterialDynamicFlow({
                        color: Cesium.Color.RED,
                        speed: 10,
                        opacity: 0.3,
                        percent: 0.1,
                    });
                   createPolyline(material, 10, 0, 2500, 3);
                    break;
            }

        }
        //线
        function createPolyline(material, lon = 0, lat = 0, height = 2500, width = 3) {
            var entity = map.viewer.entities.add({
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        lon,
                        lat,
                        height,
                        lon + 3,
                        lat,
                        height,
                        lon + 3,
                        lat + 10,
                        height,
                    ]),
                    width: width,
                    material: material,
                },
            });
        }
        //面
        function createPolygon(
            material, west = 0,
            south = 10,
            east = 10,
            north = 20,
            height = 6e3
        ) {
            map.viewer.entities.add({
                rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),
                    material: material,
                    height: height,
                },
            });
        }
        //圆
        function createEllipse(
            material,
            lon = 0,
            lat = 30,
            height = 100,
            semiMinorAxis = 250000,
            semiMajorAxis = 250000
        ) {
            map.viewer.entities.add({
                name: "动员",
                position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
                ellipse: {
                    height: height,
                    semiMinorAxis: semiMinorAxis,
                    semiMajorAxis: semiMajorAxis,
                    material: material,
                },
            });
        }
        //球
        function createEllipsoid(
            material,
            lon = 0,
            lat = 20,
            height = 100,
            maximumCone = 180,
            radii = [900000, 900000, 900000]
        ) {
            map.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
                ellipsoid: {
                    radii: new Cesium.Cartesian3(...radii), //椭球的半径--x,y,z
                    maximumCone: Cesium.Math.toRadians(180), //椭圆形的最大圆锥角的属性
                    material: material,
                },
            });
        }
        // 墙
        function createWall(material, lon = 0, lat = 0, height = 250000, width = 3) {
            var entity = map.viewer.entities.add({
                wall: {
                    maximumHeights: [height, height, height],
                    minimumHeights: [0, 0, 0],
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        lon,
                        lat,
                        height,
                        lon + 3,
                        lat,
                        height,
                        lon + 3,
                        lat + 10,
                        height,
                    ]),
                    material: material,
                },
            });
            map.viewer.flyTo(entity);
        }
    </script>
</body>

</html>